<template>
    <div class="view">
        <android-nav-bar title="专属活动" v-on:back="back"></android-nav-bar>
        <div class="box">
            <div class="activity-show" :style="{'background-image': `url(${publicPath}img/temp/activity1000.jpg)`,'background-size':'100%'}">
                {{type}} 元套餐
            </div>
            <cube-scroll
                    ref="scroll"
                    :options="options">
                <div class="container flex">
                    <div class="self">
                        <head-img class="self-img"
                                  :styleObject="{width:'20vw',height:'20vw'}"
                                  showObject="self" :friend="self"
                                  :self="self"
                                  noneImgTip=""></head-img>
                    </div>
                    <div class="has-people" v-for="item in hasPeople">
                        <span class="iconfont" :class="item.hasPeople?'icon-weishangchengicon_morentouxiang':'icon-wenhao'"></span>
                    </div>
                    <div class="ellipsiss">
                        <span class="iconfont icon-gengduoanniu"></span>
                    </div>
                </div>
                <div class="tip">活动还差{{peopleNum}}人,就可享受大礼包
                    <svg class="svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-liwuhe"></use>
                    </svg>!
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";
    import VerificationUnit from "@/unit/VerificationUnit";
    import DialogConfig from "@/constant/DialogConfig";
    import HeadImg from "@/components/HeadImg.vue";

    @Component({
        components: {
            AndroidNavBar,HeadImg
        }
    })
    export default class MineMoneyRecharge extends Scene {
        private publicPath: string = process.env.BASE_URL;
        @State("UserStore")
        public user!: InterfaceUser;
        private type: number | "" = "";
        private peopleNum: number = 0;
        private totalNum: number = 0;
        private hasPeople: any = [{hasPeople:true},{hasPeople:true},{hasPeople:true},{hasPeople:true}];
        //private elliShow: boolean = false;
        private sort: number = 0;

        private get options(): any {
            return {
                scrollbar: true
            };
        }

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private get self(): any {
            return {
                headImg: this.user.avatarId > 0 ? this.user.avatar.filePath : "",
            };
        }

        private getActivity():void{
            try {
                let loadToast = (<any> this).$createToast({
                    time: 0,
                    type: "loading",
                    mask: true,
                    txt: "加载中..."
                }).show();
                Http.get(this.api.getSurplusOutNum, {}, {token: this.user.token}).then((res) => {
                    if (res.code == 1) {
                        loadToast.hide();
                        console.log(res);
                        this.type=res.data.type;
                        this.peopleNum=res.data.num;
                        this.totalNum=res.data.total;
                        this.sort=res.data.sort;
                        switch (this.totalNum - this.sort) {
                            case 0:
                                for (let i in this.hasPeople){
                                    this.hasPeople[i].hasPeople=false;
                                }
                                break;
                            case 1:
                                for (let i in this.hasPeople){
                                    if(Number(i) !== 0){
                                        this.hasPeople[i].hasPeople=false;
                                    }
                                }
                                break;
                            case 2:
                                for (let i in this.hasPeople){
                                    if(Number(i) > 1){
                                        this.hasPeople[i].hasPeople=false;
                                    }
                                }
                                break;
                            case 3:
                                for (let i in this.hasPeople){
                                    if(Number(i) > 2){
                                        this.hasPeople[i].hasPeople=false;
                                    }
                                }
                                break;
                            default:
                                break;
                        }
                    } else {
                        loadToast.hide();
                        this.globalSingleResultToast(res);
                    }
                }).catch((res) => {
                    loadToast.hide();
                    console.log(res);
                    (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        txt: "网络繁忙,暂无信息!",
                        mask: true,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                });
            }catch (e) {

            }
        }

        private mounted(): void {
            this.getActivity();
        }


    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden

        .box
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);

            &::before
                display table;
                content '';

            .activity-show
                width 96vw;
                height 120px;
                line-height 120px;
                border-radius 10px;
                margin 10px auto;
                background-color #ffffff;
                font-family lovely !important;
                color #FFE793;
                font-size 30px;
                text-align center;

            >>>.cube-scroll-wrapper
                width 96vw;
                height calc(100vh - 120px - 20px - var(--safe-area-inset-top) - 47px - 10px - var(--safe-area-inset-bottom));
                margin 0 auto;
                margin-bottom calc(10px + var(--safe-area-inset-bottom));
                background-color #ffffff;
                border-radius 10px;

                .container
                    padding 20px 10px;
                    flex-wrap wrap;
                    height 210px;
                    overflow hidden;
                    margin-bottom 20px;
                    >div
                        margin 10px calc((96vw - 20px - 60vw) / 6);
                        width 20vw;
                        height 20vw;
                        line-height 20vw;

                    .has-people,.none-people
                        border-radius 50%;
                        background-color $theme-line-color;
                        color $theme-common-color;
                        text-align center;
                        .icon-weishangchengicon_morentouxiang
                            font-size 50px !important;

                        .icon-wenhao
                            font-size 40px !important;

                    .ellipsiss
                        text-align center;
                        color $theme-line-color;

                .tip
                    font-size 20px;
                    text-align center;
                    font-family lovely !important;
                    color $theme-advancing-color;

                    .svg-icon
                        font-size 9.4vw;


</style>
